<template>
    <div class="waiting-queue-box">
        <commpVxeTable
        :isCanWrap="true"
        :config="dataTableConfig" 
        :columns="columnsVxe" 
        :formItem="formItem"
        ref="acceptanceRegistrationRef"
        >
            <template v-slot:fcykssj_fcyjssj="{row}" data-desc="审评日期">
                {{ row.fcykssj }}至{{ row.fcyjssj }}
            </template>
            <template v-slot:fbmzt_name="{row}">
                <div  style="display: flex;align-items: center;flex-direction: column;">
                    <div style="width: 237px;display: flex;justify-content: flex-start;align-items: center;" v-if="row.fbmzt == '已发布'">
                        <span style="color: #1ab394;border: 1px solid #1ab394;border-radius: 20px;padding:0 5px;">报名中&nbsp;&nbsp;(截止：{{row.fbmjsrq}})</span>
                        <!-- <span style="color: #ed5565;border: 1px solid #ed5565;border-radius: 20px;padding:0 5px;display: inline-block;margin-left: 5px;"></span> -->
                    </div>
                    <div v-if="row.fbmzt == '已结束'">
                        <span style="color: #a5a1a1;border: 1px solid #a5a1a1;border-radius: 20px;padding:0 5px;">已结束 ({{row.fbmksrq}}至{{row.fbmjsrq}})</span>
                    </div>
                    <div style="width: 237px;display: flex;justify-content: flex-start;align-items: center;margin-top: 5px;" v-if="row.sfbm == '已报名'">
                        <span style="color: #66c24f;border: 1px solid #66c24f;border-radius: 20px;padding:0 5px;display: inline-block;height: 20.8px;">已报名</span>
                        <a-button v-if="row.fbmzt == '已发布'" size="small" style="margin-left: 5px;height: 22.8px !important;" class="red-btn signUp-btn-v" type="primary" @click="signUpClick(row,false)">取消报名</a-button>
                    </div>
                    <div style="width: 237px;display: flex;justify-content: flex-start;align-items: center;margin-top: 5px;" v-if="row.sfbm == '未报名'">
                        <span style="color: #faad14;border: 1px solid #faad14;border-radius: 20px;padding:0 5px;display: inline-block;height: 20.8px;">未报名</span>
                        <a-button v-if="row.fbmzt == '已发布'" size="small" style="margin-left: 5px;height: 22.8px !important;" class="blue-btn signUp-btn-v" type="primary" @click="signUpClick(row,true)">点击报名</a-button>
                    </div>
                </div>
            </template>
            <template v-slot:operation_btn="{row}">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="applicationDetailsClick(row)">报名详情</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <registeredDetails ref="registeredDetailsRef" @applicationDetailsClick="applicationDetailsClick"/>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import moment from 'moment'
import {ybmjhverifySfyjbm, ybmjhdjbm, ybmjhcancelBm,} from './service/index'
import registeredDetails from './registeredDetails.vue'
export default {
    components:{
        commpVxeTable,
        registeredDetails,
    },
    props:{
        isRegistrationBtn:{
            type: String,
            required: false
        }
    },
    data(){
        return{
            formItem:[{
                label: '是否报名',
                model: 'sfbm',
                type:'Select',
                options:[{
                    label: '已报名',
                    value: '已报名'
                },{
                    label: '未报名',
                    value: '未报名'
                }]
            }],
            columnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '审评类型', //列头显示文字
                field: 'fjcylx',
            },{
                title: '审评日期', //列头显示文字
                width:195,
                field: 'fcykssj',
                slots: {
                    // 使用插槽模板渲染
                    default: 'fcykssj_fcyjssj',
                },
            },{
                title: '审评地点', //列头显示文字
                field: 'fjcdd',
            },{
                title: '审评要求', //列头显示文字
                field: 'fjcyq',
            },{
                title: '状态', //列头显示文字
                field: 'fbmzt',
                titleInterval:true,
                width:270,
                slots: {
                    // 使用插槽模板渲染
                    default: 'fbmzt_name',
                    header:'fbmzt_header',
                },
            }
            // ,{
            //     title: '操作',
            //     field: 'id',
            //     titleInterval:true,
            //     slots: {
            //         // 使用插槽模板渲染
            //         header:'operation_header',
            //         default: 'operation_btn',
            //     },
            //     fixed: 'right',
            //     width:95
            // }
            ],
            dataTableConfig:{
                api: assessCheckApi.ybmjhkbmjhPageList,
                rowId: 'id',
                paramet:{
                }
            },
            addEditParameter:{},
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        applicationDetailsClick(row){
            var that = this
            ybmjhverifySfyjbm({id:row.id}).then(res=>{
                if(res.code == 200){
                    this.$refs.registeredDetailsRef.getData({...row,registrationStatus:res.result,isRegistrationBtn:true})
                    this.$refs.registeredDetailsRef.visible = true
                    // if(res.result==0){
                    //     this.$confirm({
                    //         title:'您确认要报名吗？',
                    //         // icon: createVNode(ExclamationCircleOutlined),
                    //         onOk() {
                    //             ybmjhdjbm({id:row.id}).then(res1=>{
                    //                 if(res1.code == 200){
                    //                     that.$message.success(res1.message)
                    //                 }else{
                    //                     that.$message.warning(res1.message)
                    //                 }
                    //             })
                    //         },
                    //     });
                        
                    // }else{
                    //     this.$message.warning('当前审评任务您已报名，不能重复进行报名。')
                    // }
                    
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        signUpClick(row,val){
            var that = this
            this.$confirm({
                title:'您确认要'+(val?'报名':'取消报名')+'吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    if(val){
                        ybmjhdjbm({id:row.id}).then(res=>{
                            if(res.code == 200){
                                that.$message.success(res.message)
                                that.$refs.acceptanceRegistrationRef.searchEvent()
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }else{
                        ybmjhcancelBm({id:row.id}).then(res=>{
                            if(res.code == 200){
                                that.$message.success(res.message)
                                that.$refs.acceptanceRegistrationRef.searchEvent()
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                }
            })
            
        },
    }
}
</script>
<style lang="less">
.waiting-queue-box{
    background: #fff;
    .waiting-content-v{
        height: calc(100vh - 191px -48px);
    }
    .ignUp-btn-v{
        height: 22.8px !important;
    }
}
</style>